<!-- <script setup>
import { ref } from 'vue'

import { computed } from 'vue'

const list = ref ([1,2,3,4,5,6,7,8])

const computedList = computed(() =>{
  return list.value.filter(item  => item > 2)
})

setTimeout(() => {
 list.value.push(9,10,11)
}, 3000)

</script>

<template>
<div>
原始响应式数组- {{ list }}
</div>

<div>
计算属性数组- {{ computedList }}
</div>

</template> -->

<!-- <script setup>
import soncom from './son-com.vue'
const getMessage = (msg) => {
    console.log(msg)
}
</script>

<template>

    <div>
        <h2>父组件APP</h2>
       绑定事件
        <soncom @get-messasge="getMessage" />

    </div>

</template> -->

<!--
<script setup>
import { onMounted, ref } from 'vue'
import TextCom from './text-com.vue'

const h1Ref = ref(null)
const comRef = ref(null)

onMounted(() => {
console.log(h1Ref.value)
console.log(comRef.value)

})
</script>

<template>
<h1 ref="h1Ref">dom标签</h1>

<TextCom ref="comRef" />

</template> -->

<!-- <script setup>
import { provide, ref } from 'vue'
import RoomMsgItem from './RoomMsgItem.vue'

//1.顶层组件提供数据
provide('data-key','this is room data')

//传递响应式数据
const count = ref(0)
provide('count-key',count)
setTimeout(() => {
    count.value = 100
},3000)


//传递方法
const SetCount = () => {
    count.value++
}
provide('setcount-key',SetCount)


</script>

<template>
<div>
    顶层组件
    <RoomMsgItem />
</div>
</template> -->

<!-- pinia检测 -->
<script setup>
//1.导入 use 打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from '@/stores/counter'
import{ storeToRefs } from 'pinia'

//2.执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)

//直接解构赋值(响应式丢失)
//const { count, doubleCount } = counterStore

// console.log(count, doubleCount)

//方法包裹（保持响应式更新）
const { count, doubleCount } = storeToRefs(counterStore)
console.log(count, doubleCount)

//方法直接从原来的counterStore中解构赋值
const { increment } = counterStore

//触发action
onMounted(() => {
  counterStore.getList()
})
</script>

<template>
<button @click="increment">{{ count }}</button>
{{ doubleCount }}

<ul>
  <li v-for="item in counterStore.list" :key="item.id">
    {{ item.name }}
  </li>
</ul>

</template>
